<template>
  <div class="app-container">
    <div class="filter-bg">
      <div class="filter-items">
        <el-input
          v-model="listQuery.title"
          placeholder="档案标题"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />

        <el-select
          v-model="listQuery.fileType"
          placeholder="档案类型"
          clearable
          class="filter-item"
          style="width: 160px"
          @change="handleFilter"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-input
          v-model="listQuery.submitter"
          placeholder="提交人"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />

        <el-select
          v-model="listQuery.file_cabinet_id"
          clearable
          class="filter-item"
          placeholder="档案柜编号"
          @change="FilterFileCabinetChange"
        >
          <el-option
            v-for="item in fileCabinetAry"
            :key="item.id"
            :label="`${item.number}号档案柜`"
            :value="item.id"
          />
        </el-select>

        <el-select
          v-model="listQuery.file_folder_id"
          clearable
          class="filter-item"
          placeholder="档案盒编号"
          :disabled="filterFileFolderDisable"
        >
          <el-option
            v-for="item in filterFileCaseList"
            :key="item.id"  
            :label="`${item.number}`+'号'+`${item.file_folder_name?'（'+ item.file_folder_name +'）':''}`"
            :value="item.id"
          />
        </el-select>

        <el-select
          v-model="listQuery.sort"
          style="width: 140px"
          class="filter-item"
          @change="handleFilter"
        >
          <el-option
            v-for="item in sortOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>

        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="filterDateChange"
        ></el-date-picker>
      </div>

      <div class="filter-btns">
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
          >添加</el-button
        >

        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-edit"
          @click="handlePrint"
          >{{ isMultiSelect ? "取消多选" : "多选打印" }}</el-button
        >

        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-edit"
          v-print="'#printStyle'"
          v-if="isMultiSelect"
          >打印</el-button
        >
      </div>
    </div>

    <div style="display: none">
      <div ref="print" id="printStyle">
        　
        <div
          class="item"
          v-for="(item, index) in this.multipleSelection"
          :key="index"
        >
          <div class="qrcode-container">
            <!-- <div class="qrcode-header">dadada</div> -->
            <div class="qrcode-content">
              <div class="qrcode-pic" ref="codeItem"></div>
              <div class="qrcode-info">
                <div class="qrcode-sn">{{ item.sn }}</div>
                <div class="qrcode-title">{{ item.title }}</div>
              </div>
            </div>
            <!-- <div class="qrcode-footer"></div> -->
          </div>
        </div>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="60"
        align="center"
        v-if="isMultiSelect"
      >
      </el-table-column>

      <el-table-column
        label="ID"
        type="index"
        align="center"
        width="80"
      ></el-table-column>

      <el-table-column label="档案编号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.sn }}</span>
        </template>
      </el-table-column>

      <el-table-column label="档案标题" align="center">
        <template slot-scope="{ row }">
          <span class="link-type" @click="checkDetail(row)">{{
            row.title
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="档案类型" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.file_type_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="负责人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column label="提交人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.submitter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click.stop="handleUpdate(row)"
            >编辑</el-button
          >
          <el-button
            v-if="row.lend == '1'"
            size="mini"
            type="success"
            @click.stop="handleModifyStatus(row, '2')"
            >借出</el-button
          >
          <el-button
            v-if="row.lend == '2'"
            size="mini"
            @click.stop="handleModifyStatus(row, '1')"
            >归还</el-button
          >
          <el-button
            v-if="row.status != 'deleted'"
            size="mini"
            type="danger"
            @click.stop="handleRentRecord(row, $index)"
            >借阅记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @closed="dialogClosed"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="档案标题" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>

        <el-form-item label="所属部门">
          <el-input :placeholder="temp.branch_name" :disabled="true" />
        </el-form-item>

        <el-form-item label="文档日期" prop="post_date">
          <el-date-picker
            v-model="temp.post_date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            @change="fileDateChange"
            :disabled="isEdit"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="档案柜">
          <el-select
            v-model="temp.file_cabinet_id"
            class="filter-item"
            placeholder="档案柜编号"
            @change="fileCabinetChange"
          >
            <el-option
              v-for="item in fileCabinetAry"
              :key="item.id"
              :label="`${item.number}号档案柜`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="档案盒">
          <el-select
            v-model="temp.file_folder_id"
            class="filter-item"
            placeholder="档案盒编号"
          >
            <el-option
              v-for="item in fileCaseList"
              :key="item.id"
              :label="`${item.number}`+'号'+`${item.file_folder_name?'（'+ item.file_folder_name +'）':''}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="盒内顺序号">
          <el-input placeholder="请输入" v-model="temp.orderbox" />
        </el-form-item>

        <el-form-item label="档案类型" prop="file_type">
          <el-select
            v-model="temp.file_type"
            class="filter-item"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="负责人" prop="author">
          <el-input placeholder="请输入" v-model="temp.author" />
        </el-form-item>

        <el-form-item label="提交人" prop="submitter">
          <el-input placeholder="请输入" v-model="temp.submitter" />
        </el-form-item>

        <el-form-item label="文件总页数" prop="page_number">
          <el-input placeholder="请输入" v-model="temp.page_number" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="temp.remark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>

      <el-upload
        ref="upload"
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-change="onUploadChange"
        class="editor-slide-upload"
        action="1"
        :auto-upload="false"
        :data="temp"
        :http-request="handlePostRequest"
        accept=".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx"
      >
        <el-button size="small" type="primary">选择附件</el-button>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="详情"
      :visible.sync="dialogDetailVisible"
      @closed="dialogClosed"
    >
      <el-form
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="档案标题">
          <div class="detail-label">{{ temp.title }}</div>
        </el-form-item>

        <el-form-item label="所属部门">
          <div class="detail-label">{{ temp.branch_name }}</div>
        </el-form-item>

        <el-form-item label="文档日期">
          <div class="detail-label">{{ temp.post_date }}</div>
        </el-form-item>

        <el-form-item label="档案柜">
          <div class="detail-label">
            {{
              temp.file_cabinet_number > 0
                ? temp.file_cabinet_number + "号档案柜"
                : "无"
            }}
          </div>
        </el-form-item>

        <el-form-item label="档案盒">
          <div class="detail-label">
            {{temp.file_folder_number}}号{{temp.file_folder_name?"（"+temp.file_folder_name+"）":""}}
          </div>
        </el-form-item>

        <el-form-item label="盒内顺序号">
          <div class="detail-label">
            {{ temp.orderbox > 0 ? temp.orderbox : "无" }}
          </div>
        </el-form-item>

        <el-form-item label="档案类型">
          <div class="detail-label">{{ temp.file_type_name }}</div>
        </el-form-item>

        <el-form-item label="负责人">
          <div class="detail-label">{{ temp.author }}</div>
        </el-form-item>

        <el-form-item label="提交人">
          <div class="detail-label">{{ temp.submitter }}</div>
        </el-form-item>

        <el-form-item label="文件总页数">
          <div class="detail-label">{{ temp.page_number }}</div>
        </el-form-item>

        <el-form-item label="备注">
          <div class="detail-label">
            {{ temp.remark? temp.remark : "无" }}
          </div>
        </el-form-item>
      </el-form>

      <el-upload
        :file-list="fileList"
        :show-file-list="true"
        :on-preview="handlePreview"
        class="editor-upload-detail"
        action
      >
        <div slot="tip" class="el-upload__tip">附件:</div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogDetailVisible = false"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="借阅记录" :visible.sync="dialogRecordVisible">
      <el-table :data="recordList" border style="width: 100%">
        <el-table-column label="日期" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="借阅人" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.user }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.type == 1 ? "归还" : "借出" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRecordVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="借阅" :visible.sync="dialogRentVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
      >
        <el-form-item label="文档编号">
          <el-input :placeholder="temp.sn" :disabled="true" />
        </el-form-item>

        <el-form-item label="档案标题">
          <el-input :placeholder="temp.title" :disabled="true" />
        </el-form-item>

        <el-form-item label="借阅人" prop="borrowerName">
          <el-input placeholder="请输入借阅人" v-model="temp.borrowerName" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRentVisible = false">取消</el-button>
        <el-button type="primary" @click="handleLend">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchList,
  createFile,
  getFileList,
  updateFile,
  lendFile,
  givebackFile,
  getLendLog,
  getFileType,
  getCabinetList,
  getFileCaseList,
} from "@/api/article";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { mapGetters } from "vuex";
import QRCode from "qrcodejs2";
import print from "vue-print-nb";
const config = require("../../../src/settings");
var moment = require("moment");

export default {
  name: "ComplexTable",
  components: {
    Pagination
  },
  computed: {
    ...mapGetters(["branchID", "branchName"]),
  },
  directives: { waves, print },
  data() {
    return {
      list: null,
      total: 0,
      isEdit: false,
      isMultiSelect: false,
      listLoading: true,
      filterFileFolderDisable: true,
      uplodFileList: [],
      delFileList: [],
      typeList: [],
      fileCaseList: [],
      filterFileCaseList: [],
      fileCabinetAry: [],
      multipleSelection: [],
      listQuery: {
        page: 1,
        limit: 20,
        title: "",
        submitter: "",
        fileType: "",
        sort: "0",
        file_cabinet_id: "",
        file_folder_id: "",
        dateValue: {
          type: Array,
          default() {
            return [];
          },
        },
      },
      dateValue: Array,
      sortOptions: [
        { label: "时间倒序排列", key: "0" },
        { label: "时间正序排列", key: "1" },
      ],
      temp: {
        id: "",
        sn: "",
        branch_name: this.branchName,
        title: "",
        branch_id: this.branchID,
        file_cabinet_id: "",
        file_folder_id: "",
        file_type: "",
        page_number: 0, //总页数
        orderbox: "", //盒内顺序
        author: "", //负责人
        submitter: "", //文档提交人 （文档是谁给的）
        lend: "", //借还状态 1是未借出 2是已借出
        remark: "",
        post_date: moment(new Date()).format("YYYY-MM-DD"), //文档日期
        create_time: "", //创建日期
        file_cabinet_number: "", //档案柜编号
        file_folder_number: "", //档案盒编号
        borrowerName: "",
      },
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogRecordVisible: false,
      dialogRentVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      rules: {
        type: [{ required: true, message: "必填项", trigger: "change" }],
        post_date: [
          {
            required: true,
            message: "必填项",
            trigger: "change",
          },
        ],
        title: [{ required: true, message: "必填项", trigger: "blur" }],
        author: [{ required: true, message: "必填项", trigger: "blur" }],
        submitter: [{ required: true, message: "必填项", trigger: "blur" }],
        page_number: [{ required: true, message: "必填项", trigger: "blur" }],
        file_type: [
          {
            type: "string",
            required: true,
            message: "必填项",
            trigger: "change",
          },
        ],
        borrowerName: [{ required: true, message: "必填项", trigger: "blur" }],
      },
      fileList: [],
      recordList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.handleFilter();
    this.getCabinetList(this.branchID);
    this.getFileTypeList();
  },
  methods: {
    //文件列表获取接口
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    //文件分类获取接口
    getFileTypeList() {
      getFileType().then((response) => {
        this.typeList = response.data.list;
      });
    },
    //档案柜获取接口
    getCabinetList(branch_id = this.temp.branch_id) {
      getCabinetList({ branch_id: branch_id }).then((response) => {
        this.fileCabinetAry = response.data.list;
      });
    },
    //档案盒获取接口
    getFileCaseList(file_cabinet_id = this.temp.file_cabinet_id) {
      return new Promise((resolve, reject) => {
        getFileCaseList({ file_cabinet_id: file_cabinet_id })
          .then((response) => {
            this.fileCaseList = response.data.list;
            resolve(response.data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    fileDateChange() {
      this.temp.post_date = moment(this.temp.post_date).format("YYYY-MM-DD");
      console.log(this.temp.post_date );
    },
    handleFilter() {
      this.listQuery.page = 1;
      var ary = []; //对象转化为数组
      this.listQuery.dateValue = [];
      if (this.dateValue == undefined) {
        this.dateValue = [];
      }

      if (this.dateValue.length > 1) {
        ary = Object.values(this.dateValue);
        this.listQuery.dateValue.push(
          moment(ary[0]).format("YYYY-MM-DD HH:mm:ss")
        );
        this.listQuery.dateValue.push(
          moment(ary[1]).format("YYYY-MM-DD HH:mm:ss")
        );
      } else {
        this.listQuery.dateValue = [];
      }
      this.getList();
    },
    handleModifyStatus(row, lend) {
      this.temp = Object.assign({}, row); // copy obj
      if (lend === "2") {
        this.dialogRentVisible = true;
      }

      if (lend === "1") {
        //归还

        this.$confirm(
          "此操作将归还编号为：" + this.temp.sn + " 的文件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            givebackFile({ id: this.temp.id })
              .then((response) => {
                this.getList();
                this.$message({
                  message: "归还成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  message: "归还失败",
                  type: "error",
                });
              });
          })
          .catch(() => {});
      }

      // row.lend = lend;
    },
    resetTemp() {
      this.temp = {
        id: "",
        sn: "",
        branch_name: this.branchName,
        title: "",
        branch_id: this.branchID,
        file_cabinet_id: "",
        file_folder_id: "",
        file_type: "",
        page_number: 0, //总页数
        orderbox: "", //盒内顺序
        author: "", //负责人
        submitter: "", //文档提交人 （文档是谁给的）
        lend: "", //借还状态 1是未借出 2是已借出
        remark: "",
        post_date: moment(new Date()).format("YYYY-MM-DD"), //文档日期
        create_time: "", //创建日期
        file_cabinet_number: "", //档案柜编号
        file_folder_number: "", //档案盒编号
        borrowerName: "", //借阅人
      };
    },
    checkDetail(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.temp.post_date = moment(this.temp.post_date).format("YYYY-MM-DD");
      this.dialogDetailVisible = true;
      this.getfileList(this.temp.id);
    },
    handleCreate() {
      this.resetTemp();
      this.uplodFileList = [];
      this.dialogStatus = "create";
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handlePrint() {
      if (this.isMultiSelect) {
        //取消多选
        this.multipleSelection = [];
        this.$refs.multipleTable.clearSelection();
      }
      this.isMultiSelect = !this.isMultiSelect;
    },
    createData() {
      if (!this.beforeUpload()) {
        return;
      }
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          let formData = new FormData();

          for (var key in this.temp) {
            formData.append(key, this.temp[key]);
          }

          for (let index = 0; index < this.uplodFileList.length; index++) {
            const element = this.uplodFileList[index];
            formData.append("file[]", element);
          }

          createFile(formData)
            .then((response) => {
              let dic = response.data;
              let upAry = dic.list;
              this.dialogFormVisible = false;
              this.uplodFileList = [];
              this.getList();
              this.$notify({
                title: "提示",
                message: "创建成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch((error) => {
              this.$notify({
                title: "提示",
                message: "创建失败",
                type: "error",
                duration: 2000,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      this.uplodFileList = [];
      this.temp = Object.assign({}, row); // copy obj
      this.getfileList(this.temp.id);
      this.temp.post_date = moment(this.temp.post_date).format("YYYY-MM-DD");
      this.dialogStatus = "update";
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      this.getCabinetList();
      this.getFileCaseList();
    },
    updateData() {
      if (!this.beforeUpload()) {
        return;
      }
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          let formData = new FormData();

          if (this.delFileList.length > 0) {
            formData.append("delList", this.delFileList);
          }

          for (var key in this.temp) {
            formData.append(key, this.temp[key]);
          }

          for (let index = 0; index < this.uplodFileList.length; index++) {
            const element = this.uplodFileList[index];
            formData.append("file[]", element);
          }

          updateFile(formData)
            .then((response) => {
              let dic = response.data;
              let upAry = dic.list;
              this.dialogFormVisible = false;
              this.uplodFileList = [];
              this.getList();
              this.$notify({
                title: "提示",
                message: "编辑成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch((error) => {
              this.$notify({
                title: "提示",
                message: "编辑失败",
                type: "error",
                duration: 2000,
              });
            });
        }
      });
    },
    //借出
    handleLend() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          lendFile({ id: this.temp.id, user: this.temp.borrowerName }).then(
            (response) => {
              this.dialogRentVisible = false;
              this.getList();
              this.$message({
                message: "借出成功",
                type: "success",
              });
            }
          );
        }
      });
    },
    //借阅记录
    handleRentRecord(row, index) {
      getLendLog(row.id).then((response) => {
        let dic = response.data;
        let recordAry = dic.list;
        this.recordList = recordAry;
      });
      this.dialogRecordVisible = true;
    },
    //档案柜选择变化
    async fileCabinetChange() {
      const { list } = await this.getFileCaseList();
      if (list.length > 0) {
        this.temp.file_folder_id = list[0].id;
      } else {
        this.temp.file_folder_id = "";
      }
    },
    //筛选档案柜变化
    FilterFileCabinetChange(data) {
      if (data === "") {
        this.listQuery.file_folder_id = "";
        this.filterFileCaseList = [];
      } else {
        getFileCaseList({ file_cabinet_id: data }).then((response) => {
          this.filterFileCaseList = response.data.list;
        });
      }
      this.filterFileFolderDisable = data === "";
    },
    // 筛选时间范围变化
    filterDateChange() {
      // console.log(this.dateValue);
    },
    //多选打印数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$nextTick(() => {
        this.multipleSelection.forEach((item, index) => {
          let code = item.sn;
          this.$refs.codeItem[index].innerHTML = "";
          new QRCode(this.$refs.codeItem[index], {
            text: code, //二维码内容
            width: 76,
            height: 76,
            // colorDark: "#333333", //二维码颜色
            // colorLight: "#ffffff", //二维码背景色
          });
        });
      });
    },
    handlePostRequest(param) {},
    //获取上传文件列表
    getfileList(id) {
      getFileList(id).then((response) => {
        let dic = response.data;
        let upAry = dic.list;
        this.fileList = upAry;
      });
    },
    handleSuccess(response, file, fileList) {},
    handleError(response, file, flieList) {
      this.$refs.upload.uploadFiles = [];
    },
    handlePreview(file) {
      let url = config.fileHost + file.url;
      window.open(url, "_blank");
    },
    onUploadChange(file, fileList) {
      this.uplodFileList = [];
      for (let x of fileList) {
        if (x.raw) {
          this.uplodFileList.push(x.raw);
        }
      }
    },
    handleRemove(file, fileList) {
      let fileID = file.id;
      if (fileID === undefined) {
        //说明file没有id字段，那么有可能是uid字段，uid字段只包含在还未上传的文件数据中。
        this.checkUid(file.uid);
      } else {
        if (this.checkFid(fileID)) {
          this.delFileList.push(fileID);
          this.delFileList = [...new Set(this.delFileList)];
        }
      }
    },
    checkUid(uid) {
      if (uid !== undefined) {
        this.uplodFileList = this.uplodFileList.filter((element) => {
          return element.uid !== uid;
        });
      }
    },
    checkFid(fid) {
      let has = false;
      for (let i = 0; i < this.fileList.length; i++) {
        let element = this.fileList[i];
        if (fid === element.id) {
          has = true;
        }
      }
      return has;
    },
    beforeUpload() {
      for (let index = 0; index < this.uplodFileList.length; index++) {
        const file = this.uplodFileList[index];
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        const whiteList = ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx"];
        if (whiteList.indexOf(fileSuffix) === -1) {
          this.$message.error(
            "上传文件只能是 pdf、doc、docx、xls、xlsx、ppt、pptx格式"
          );
          return false;
        }

        const isLt2M = file.size / 1024 / 1024 < 60;
        if (!isLt2M) {
          this.$message.error("上传文件大小不能超过 60MB", "error");
          return false;
        }
      }

      return true;
    },
    dialogClosed() {
      this.fileList = [];
      this.delFileList = [];
      this.uplodFileList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-bg {
  padding-bottom: 10px;
}

.filter-items {
}

.filter-btns {
  margin-top: 10px;
}
.editor-slide-upload {
  margin: 20px 50px;
}

.editor-upload-detail {
  margin: 0px 50px 20px 50px;
  ::v-deep .el-icon-upload-success {
    display: none;
  }
  ::v-deep .el-icon-close {
    display: none;
  }
  ::v-deep .el-upload-list__item .el-icon-close-tip {
    display: none;
    opacity: 0;
  }

  .el-upload__tip {
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    font-weight: 700;
  }
}

//打印样式放在这个里面就可以了
@media print {
  #printStyle {
    .item {
      width: 212px;
      height: 102px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 11px;
      padding-right: 11px;
    }

    .qrcode-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .qrcode-info {
      padding-left: 3px;
    }

    .qrcode-header {
      line-height: 5px;
      height: 5px;
      width: 100%;
    }

    .qrcode-footer {
      line-height: 0px;
      height: 0px;
      width: 100%;
    }

    .qrcode-sn {
      margin-bottom: 5px;
      font-size: 3px;
      line-height: 13px;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; //需要控制的文本行数
    }

    .qrcode-title {
      padding-right: 7px;
      font-size: 3px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4; //需要控制的文本行数
      overflow: hidden;
    }
  }
}
</style>